<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文件分享</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="./index.css"/>
    <link rel="stylesheet" href="./common.css"/>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
            background-color: #f9f9f9;
            background-image: url("./uzi.jpg");
            background-size: cover;
            background-repeat: no-repeat;
        }

        .container {
            border: 2px solid #fff;
            padding: 20px;
            border-radius: 10px;
            background-color: rgba(255, 255, 255, 0.8);
            margin: auto;
            max-width: 600px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, .1);
            margin-top: 25vh;
            height: fit-content;
        }



        .content {
            border: 2px solid #fff;
            padding: 20px;
        }

        h1 {
            font-size: 24px;
            font-weight: bold;
            margin: 0 0 20px;
        }

        p {
            margin: 0 0 10px;
            font-size: 16px;
        }

        a {
            color: #409EFF;
            text-decoration: none;
        }

        a:hover {
            text-decoration: underline;
        }
    </style>
</head>

<body>
<div class="container" id="file-app">
    <h1>文件分享</h1>
    <p>文件名：<span>{{fileName}}</span></p>
    <p>文件大小：<span>{{fileSize}} b</span></p>
    <p>上传时间：<span>{{uploadTime}}</span></p>
    <p>下载链接：<a :href="downloadLink" download>点击下载</a></p>
</div>


<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="./vue.js"></script>
<!-- 引入组件库 -->
<script src="./index.js"></script>
<!-- 引入axios -->
<script src="./axios.min.js"></script>

<script>
    let v = new Vue({
        el: '#file-app',
        data() {
            return {
                fileName: '',
                fileSize: '',
                uploadTime: '',
                downloadLink: ''
            };
        },
        mounted() {
            const code = new URL(location.href).searchParams.get('code');
            if (code) {
                axios.get(`http://localhost:8080/files/shareFileByPath/${code}`)
                    .then(response => response.data)
                    .then(result => {
                        const {fileId, fileName, fileSize, uploadTime} = result['data'];
                        this.fileName = fileName;
                        this.fileSize = fileSize;
                        this.uploadTime = uploadTime;
                        this.downloadLink = `http://localhost:8080/files/download?fileId=${fileId}`;
                    })
                    .catch(error => console.log(error));
            }
        }
    });
</script>
</body>
</html>